// 编辑
import { useTitle } from 'ahooks'
import React /*useEffect, useState*/ from 'react'
import { useDispatch } from 'react-redux'
import useGetPageInfo from '../../../hooks/useGetPageInfo'
// import { useParams } from 'react-router-dom'
import useLoadQuestionData from '../../../hooks/useLoadQuestionData'
import { changeSelectedId } from '../../../store/componentsReducer'
import EditCanvas from './EditCanvas'
import EditHeader from './EditHeader'
// import { getQuestionService } from '../../../services/question'

import styles from './index.module.scss'
import PanelLeft from './PanelLeft'
import PanelRight from './PanelRight'

const Edit: React.FC = () => {
  /* const params = useParams()
  const [loading, setLoading] = useState(true)
  const [questionData, setQuestionData] = useState({})
   useEffect(() => {
    async function fn() {
      const data = await getQuestionService(params.id || '')
      setQuestionData(data)
      setLoading(false)
    }
    fn()
  }, []) */
  const { loading } = useLoadQuestionData()
  const dispatch = useDispatch()
  const { title } = useGetPageInfo()

  useTitle(`问卷编辑 - ${title}`)

  function clearSelectedId() {
    dispatch(changeSelectedId(''))
  }

  return (
    <div className={styles.container}>
      <div>
        <EditHeader />
      </div>
      <div className={styles['content-wrapper']}>
        <div className={styles.content}>
          <div className={styles.left}>
            <PanelLeft />
          </div>
          <div className={styles.main} onClick={clearSelectedId}>
            <div className={styles['canvas-wrapper']}>
              <EditCanvas loading={loading} />
            </div>
          </div>
          <div className={styles.right}>
            <PanelRight />
          </div>
        </div>
      </div>
    </div>
  )
}

export default Edit
